<!-- 列表 -->
<template>
  <div style="margin-top:3vh;">
    <div v-if="type != 'auditlist' && type != 'viplist' && type != 'courselive'  && type != 'courselist' && type != 'essaylist'&& type != 'course_lists' && type != 'course_list'&& type != 'addcourse' && type != 'livelist' && type != 'live_list'">
      <el-table
        :data="tableData"
        :header-cell-style="hstyle"
        style="100%"
        row-key="id"
        :tree-props="{children: 'child',hasChildren: 'hasChildren'}"
      >
        <el-table-column
          v-for="(item,index) in listHeader"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          align="center"
          min-width="10"
        ></el-table-column>
        <el-table-column label="操作" align="center" min-width="10" v-if="type != 'orderlist'">
          <template slot-scope="scope">
            <div v-if="type == 'userlist'">
              <!-- <el-button @click="handleClick(scope.row)" type="text" size="small">查看详情</el-button> -->
              <el-button type="text" size="small" @click="delect(scope.row)">删除</el-button>
            </div>
            <div v-else-if="type == 'rolelist'">
              <!-- <el-button @click="handleClick(scope.row)" type="text" size="small"></el-button> -->
              <el-button type="text" size="small" @click="amend(scope.row)">编辑</el-button>
              <el-button type="text" size="small" @click="delect(scope.row)">删除</el-button>
            </div>
            <div v-else-if="type == 'menulist'">
              <el-button type="text" size="small" @click="amend(scope.row)">编辑</el-button>
              <!-- <el-button type="text" size="small" @click="delect(scope.row)">删除</el-button> -->
            </div>
            <div v-else-if="type == 'courseclassifylist'">
              <el-button @click="addup(scope.row)" type="text" size="small">下级列表</el-button>
              <el-button type="text" size="small" @click="amend(scope.row)">编辑</el-button>
              <el-button type="text" size="small" @click="delect(scope.row)">删除</el-button>
              <el-button type="text" size="small" @click="course(scope.row)">课程列表</el-button>
            </div>
            <div v-else-if="type == 'subordinatelist'">
              <!-- <el-button @click="handleClick(scope.row)" type="text" size="small"></el-button> -->
              <el-button type="text" size="small" @click="amend(scope.row)">编辑</el-button>
              <el-button type="text" size="small" @click="delect(scope.row)">删除</el-button>
              <el-button type="text" size="small" @click="course(scope.row)">课程列表</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div v-if="type == 'auditlist'">
      <el-table
        :data="tableData"
        :header-cell-style="hstyle"
        style="100%"
        row-key="id"
        :tree-props="{children: 'child',hasChildren: 'hasChildren'}"
      >
        <template v-for="(item,index) in listHeader">
          <el-table-column
            :key="index"
            v-if="index < listHeader.length - 1"
            :prop="item.prop"
            :label="item.label"
            align="center"
            min-width="10"
          ></el-table-column>
          <el-table-column
            :key="index"
            v-if="index == listHeader.length - 1 "
            :prop="item.prop"
            :label="item.label"
            align="center"
            min-width="10"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.checkstatus == '未审核'">
                <el-button type="text" size="small" @click="amend(scope.row)">通过</el-button>
                <el-button type="text" size="small" @click="delect(scope.row)">驳回</el-button>
              </div>
              <div v-else>--</div>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </div>
    <div v-if="type == 'viplist'">
      <el-table
        :data="tableData"
        :header-cell-style="hstyle"
        style="100%"
        row-key="id"
        :tree-props="{children: 'child',hasChildren: 'hasChildren'}"
      >
        <template v-for="(item,index) in listHeader">
          <el-table-column
            :key="index"
            v-if="index > 0"
            :prop="item.prop"
            :label="item.label"
            align="center"
            min-width="10"
          ></el-table-column>
          <el-table-column
            :key="index"
            v-if="index == 0 "
            :prop="item.prop"
            :label="item.label"
            align="center"
            min-width="10"
          >
            <template slot-scope="scope">
              <img :src="scope.row.avatar" alt="图片加载失败" class="imgs" />
            </template>
          </el-table-column>
        </template>
        <el-table-column label="操作" align="center" min-width="10" v-if="type != 'orderlist'">
          <template slot-scope="scope">
            <div>
              <el-button type="text" size="small" @click="delect(scope.row)">课程列表</el-button>
              <el-button type="text" size="small" @click="course(scope.row)">直播列表</el-button>
              <el-button type="text" size="small" @click="amend(scope.row)">编辑</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-if="type == 'courselist'">
      <el-table
        :data="tableData"
        :header-cell-style="hstyle"
        style="100%"
        row-key="id"
        :tree-props="{children: 'child',hasChildren: 'hasChildren'}"
      >
        <template v-for="(item,index) in listHeader">
          <el-table-column
            :key="index"
            v-if="index > 0"
            :prop="item.prop"
            :label="item.label"
            align="center"
            min-width="10"
          ></el-table-column>
          <el-table-column
            :key="index"
            v-if="index == 0 "
            :prop="item.prop"
            :label="item.label"
            align="center"
            min-width="10"
          >
            <template slot-scope="scope">
              <img :src="scope.row.image_url" alt="图片加载失败" class="imgs" />
            </template>
          </el-table-column>
        </template>
      </el-table>
    </div>
    <div v-if="type == 'essaylist'">
      <el-table
        :data="tableData"
        :header-cell-style="hstyle"
        style="100%"
        row-key="id"
        :tree-props="{children: 'child',hasChildren: 'hasChildren'}"
      >
        <template v-for="(item,index) in listHeader">
          <el-table-column
            :key="index"
            v-if="index > 0"
            :prop="item.prop"
            :label="item.label"
            align="center"
            min-width="10"
          ></el-table-column>
          <el-table-column
            :key="index"
            v-if="index == 0 "
            :prop="item.prop"
            :label="item.label"
            align="center"
            min-width="10"
          >
            <template slot-scope="scope">
              <img :src="scope.row.image_url" alt="图片加载失败" class="imgs" />
            </template>
          </el-table-column>
        </template>
        <el-table-column label="操作" align="center" min-width="10" v-if="type != 'orderlist'">
          <template slot-scope="scope">
            <div>
              <el-button type="text" size="small" @click="amend(scope.row)">编辑</el-button>
              <el-button type="text" size="small" @click="delect(scope.row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
      <div v-if="type == 'course_list'">
      <el-table
        :data="tableData"
        :header-cell-style="hstyle"
        style="100%"
        row-key="id"
        :tree-props="{children: 'child',hasChildren: 'hasChildren'}"
      >
        <template v-for="(item,index) in listHeader">
          <el-table-column
            :key="index"
            v-if="index > 1"
            :prop="item.prop"
            :label="item.label"
            align="center"
            min-width="10"
          ></el-table-column>
          <el-table-column
            :key="index"
            v-if="index == 0 "
            :prop="item.prop"
            :label="item.label"
            align="center"
            min-width="10"
          >
            <template slot-scope="scope">
              <img :src="scope.row.course_cover_img" alt="图片加载失败" class="imgs" />
            </template>
          </el-table-column>
           <el-table-column
            :key="index"
            v-if="index == 1 "
            :prop="item.prop"
            :label="item.label"
            align="center"
            min-width="10"
          >
            <template slot-scope="scope">
              <img :src="scope.row.course_share_img" alt="图片加载失败" class="imgs" />
            </template>
          </el-table-column>
        </template>
        <el-table-column label="操作" align="center" min-width="10" v-if="type != 'orderlist'">
          <template slot-scope="scope">
            <div>
              <el-button type="text" size="small" @click="amend(scope.row)">编辑</el-button>
              <el-button type="text" size="small" @click="delect(scope.row)">删除</el-button>
              <el-button type="text" size="small" @click="course(scope.row)">直播间列表</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

      <div v-if="type == 'course_lists'">
      <el-table
        :data="tableData"
        :header-cell-style="hstyle"
        style="100%"
        row-key="id"
        :tree-props="{children: 'child',hasChildren: 'hasChildren'}"
      >
        <template v-for="(item,index) in listHeader">
          <el-table-column
            :key="index"
            v-if="index > 1"
            :prop="item.prop"
            :label="item.label"
            align="center"
            min-width="10"
          ></el-table-column>
          <el-table-column
            :key="index"
            v-if="index == 0 "
            :prop="item.prop"
            :label="item.label"
            align="center"
            min-width="10"
          >
            <template slot-scope="scope">
              <img :src="scope.row.course_cover_img" alt="图片加载失败" class="imgs" />
            </template>
          </el-table-column>
           <el-table-column
            :key="index"
            v-if="index == 1 "
            :prop="item.prop"
            :label="item.label"
            align="center"
            min-width="10"
          >
            <template slot-scope="scope">
              <img :src="scope.row.course_share_img" alt="图片加载失败" class="imgs" />
            </template>
          </el-table-column>
        </template>
        <!-- <el-table-column label="操作" align="center" min-width="10" v-if="type != 'orderlist'">
          <template slot-scope="scope">
            <div>
              <el-button type="text" size="small" @click="amend(scope.row)">编辑</el-button>
              <el-button type="text" size="small" @click="delect(scope.row)">删除</el-button>
              <el-button type="text" size="small" @click="course(scope.row)">直播间列表</el-button>
            </div>
          </template>
        </el-table-column> -->
      </el-table>
    </div>

    <div v-if="type == 'addcourse'">
      <el-table
        :data="tableData"
        :header-cell-style="hstyle"
        style="100%"
        row-key="id"
        :tree-props="{children: 'child',hasChildren: 'hasChildren'}"
      >
        <template v-for="(item,index) in listHeader">
          <el-table-column
            :key="index"
            v-if="index > 0"
            :prop="item.prop"
            :label="item.label"
            align="center"
            min-width="10"
          ></el-table-column>
          <el-table-column
            :key="index"
            v-if="index == 0 "
            :prop="item.prop"
            :label="item.label"
            align="center"
            min-width="10"
          >
            <template slot-scope="scope">
              <img :src="scope.row.image_url" alt="图片加载失败" class="imgs" />
            </template>
          </el-table-column>
        </template>
        <el-table-column label="操作" align="center" min-width="10" v-if="type != 'orderlist'">
          <template slot-scope="scope">
            <div>
              <el-button type="text" size="small" @click="amend(scope.row)">选择</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

     <div v-if="type == 'livelist'">
      <el-table
        :data="tableData"
        :header-cell-style="hstyle"
        style="100%"
        row-key="id"
        :tree-props="{children: 'child',hasChildren: 'hasChildren'}"
      >
        <template v-for="(item,index) in listHeader">
          <el-table-column
            :key="index"
            v-if="index > 1"
            :prop="item.prop"
            :label="item.label"
            align="center"
            min-width="10"
          ></el-table-column>
          <el-table-column
            :key="index"
            v-if="index == 0 "
            :prop="item.prop"
            :label="item.label"
            align="center"
            min-width="10"
          >
            <template slot-scope="scope">
              <img :src="scope.row.course_cover_img" alt="图片加载失败" class="imgs" />
            </template>
          </el-table-column>
           <el-table-column
            :key="index"
            v-if="index == 1 "
            :prop="item.prop"
            :label="item.label"
            align="center"
            min-width="10"
          >
            <template slot-scope="scope">
              <img :src="scope.row.course_share_img" alt="图片加载失败" class="imgs" />
            </template>
          </el-table-column>
        </template>
      </el-table>
    </div>

    <div v-if="type == 'live_list'">
      <el-table
        :data="tableData"
        :header-cell-style="hstyle"
        style="100%"
        row-key="id"
        :tree-props="{children: 'child',hasChildren: 'hasChildren'}"
      >
        <template v-for="(item,index) in listHeader">
          <el-table-column
            :key="index"
            v-if="index > 1"
            :prop="item.prop"
            :label="item.label"
            align="center"
            min-width="10"
          ></el-table-column>
          <el-table-column
            :key="index"
            v-if="index == 0 "
            :prop="item.prop"
            :label="item.label"
            align="center"
            min-width="10"
          >
            <template slot-scope="scope">
              <img :src="scope.row.cover_img" alt="图片加载失败" class="imgs" />
            </template>
          </el-table-column>
           <el-table-column
            :key="index"
            v-if="index == 1 "
            :prop="item.prop"
            :label="item.label"
            align="center"
            min-width="10"
          >
            <template slot-scope="scope">
              <img :src="scope.row.share_img" alt="图片加载失败" class="imgs" />
            </template>
          </el-table-column>
        </template>
        <el-table-column label="操作" align="center" min-width="10" v-if="type != 'orderlist'">
          <template slot-scope="scope">
            <div>
              <el-button type="text" size="small" @click="amend(scope.row)">更多详情</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

      <div v-if="type == 'courselive'">
      <el-table
        :data="tableData"
        :header-cell-style="hstyle"
        style="100%"
        row-key="id"
        :tree-props="{children: 'child',hasChildren: 'hasChildren'}"
      >
        <template v-for="(item,index) in listHeader">
          <el-table-column
            :key="index"
            :prop="item.prop"
            :label="item.label"
            align="center"
            min-width="10"
          ></el-table-column>
        </template>
        <el-table-column label="操作" align="center" min-width="10">
          <template slot-scope="scope">
            <div>
              <el-button type="text" size="small" @click="amend(scope.row)">查看回放</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    listHeader: {
      type: Array,
      default: () => {
        return [];
      }
    },
    type: {
      type: String
    }
  },
  data() {
    return {
      hstyle: {
        color: "#111418",
        background: "#eff2f7"
      }
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  methods: {
    //点击列表查看
    handleClick(row) {
      row.type = "look";
      let compile = row;
      this.$emit("operate", compile);
    },
    //点击编辑权限
    compileClick(row) {
      row.type = "compile";
      let compile = row;
      this.$emit("operate", compile);
    },
    //点击删除
    delect(row) {
      row.type = "delect";
      let compile = row;
      this.$emit("operate", compile);
    },
    //点击课程
    course(row) {
      row.type = "course";
      let compile = row;
      this.$emit("operate", compile);
    },
    addup(row) {
      row.type = "addup";
      let compile = row;
      this.$emit("operate", compile);
    },
    amend(row) {
      row.type = "amend";
      let compile = row;
      this.$emit("operate", compile);
    }
  },
  computed: {
    listHeaders() {
      console.log(this.listHeader);
      return this.listHeader;
    }
  }
};
</script>
<style scoped>
/* @import url(); 引入css类 */
.imgs {
  display: block;
  width: 50%;
  margin: auto;
}
</style>